"use client";
import { DailyCompensateInfo, getDailyCompensateInfo } from "@/api/activity";
import CustomButton from "@/components/CustomButton";
import { VipProgressMap } from "@/enums";
import useCountdown from "@/hooks/useCountdown";
import { useVipStore } from "@/stores/useVipStore";
import clsx from "clsx";
import React from "react";
import styles from "./page.module.scss";

const Page = () => {
    const { vipData } = useVipStore();
    const [_, formattedRes] = useCountdown({ leftTime: 3000 * 1000 });
    const [data, setData] = React.useState<DailyCompensateInfo>();

    console.log(VipProgressMap);

    React.useEffect(() => {
        getData();
    }, []);

    const getData = async () => {
        const res = await getDailyCompensateInfo();
        if (res?.code === 200) {
            setData(res.data);
        }
    };

    return (
        <>
            <div className={styles.top}>
                <div className="flex-1">
                    <div>
                        <span className="text-[18px] font-black">Atualmente</span>
                        <span className="text-[22px] font-black">VIP 0</span>
                    </div>
                    <div className="text flex w-fit rounded-[6px] bg-[#00000026] px-[8px] py-[2px] text-[14px]">
                        Taxa de Resgate 0.1%
                        <span className="ml-[6px]">(1%)</span>
                    </div>
                    <div className="flex flex-row items-center gap-[6px] text-[var(--textColor1)]">
                        <span className="">Próximo</span>
                        <span className="text-[22px] font-black">VIP 0</span>
                    </div>
                    <div data-v-7e453f88="" className="text-[14px] text-[var(--textColor1)]">
                        Taxa de Resgate 0.1%{" "}
                        <span data-v-7e453f88="" className="pl-[6px]">
                            (1%)
                        </span>
                    </div>
                </div>
                <div className="w-[32%]">
                    <img
                        src={VipProgressMap.get(data?.vip_level || 0)?.icon}
                        className="relative -top-[10px] scale-[1.5] transform"
                        alt=""
                    />
                    <img src="/vipIcon/vip_tuodi_bg.webp" alt="" />
                </div>
            </div>
            <div className="p-[10px]">
                <div className="flex flex-col items-center gap-[8px] rounded-[var(--borderRadius)] bg-[var(--main-background)] p-[15px] text-[12px]">
                    <div className="w-full">Perdas de ontem R$ 0,00</div>
                    <div className="text-[18px] font-black text-[var(--textColor4)]">Cashback</div>
                    <div className="flex w-full flex-row items-center justify-center gap-[8px] text-[22px] font-black text-[var(--textColor4)]">
                        R$ 0,00 / R$ 0,00
                    </div>
                    <CustomButton className="mt-[8px] w-full">Unopened</CustomButton>
                </div>

                <div className="mt-[10px] flex w-full flex-col items-center justify-center gap-[5px] rounded-[var(--borderRadius)] bg-[var(--primary7)] py-[4px] text-[13px]">
                    <div className="flex w-full flex-row items-center justify-center gap-[5px] text-[13px]">
                        <i className="iconfont icon-gantanhao text-[red]"></i>
                        <span>Recebimento previsto para amanhä:</span>
                    </div>
                    <div className="text-num text-[22px] font-black">
                        R$0,00 <span className="font-normal">/ R$0,00</span>
                    </div>
                    <span className="flex flex-row items-center justify-center gap-[5px] text-[12px] text-[var(--textColor4)]">
                        <i className="iconfont icon-daojishi-hui !text-[13px]"></i>
                        <div className="countdownTimer needsclick flex flex-row items-center justify-center gap-[1px]">
                            <span className="text-[var(--textColor1)]">{formattedRes.hours}</span>:
                            <span className="text-[var(--textColor1)]">{formattedRes.minutes}</span>
                            :
                            <span className="text-[var(--textColor1)]">{formattedRes.seconds}</span>
                        </div>
                    </span>
                </div>
                <div
                    className={clsx(
                        "mt-[.1rem] flex flex-col gap-[8px] rounded-[var(--borderRadius)] bg-[var(--primary13)] p-[15px] text-[12px] font-normal"
                    )}
                >
                    <span>1. Resgate= perdas no jogo x taxa de reembolso do nivel nobre.</span>
                    <span>
                        2. Se o usuário não resgatar o resgate hoje, será consideradocomo renúncia.
                    </span>
                    <span>3. O horário de liquidação é à mela-noite, horarlo do Brasil.</span>
                    <span>
                        4. Se vocé não fizer apostas durante o periodo de reembolso em dinheiro, ou
                        se seus lucros de ontem cobrirem suas perdas, vocé não receberá o reembolso
                        em dinheiro.
                    </span>
                    <span>
                        5. Cada pessoa tem urm limite diario de reembolso em dinheiro de até R$
                        10.000
                    </span>
                </div>
                <div className="mt-[.1rem] flex flex-col gap-[8px] rounded-[var(--borderRadius)] bg-[var(--primary13)] p-[15px] text-[12px] font-normal">
                    <div className={clsx("flex items-center py-[.08rem]")}>
                        <div className="flex-1 text-center">Nivel Upgrade</div>
                        <div className="flex-1 text-center">Taxa de Resgate</div>
                    </div>
                    <div className="flex items-center py-[.08rem]">
                        <div className="flex-1 text-center">Nivel Upgrade</div>
                        <div className="flex-1 text-center">Taxa de Resgate</div>
                    </div>
                    <div className="flex items-center py-[.08rem]">
                        <div className="flex-1 text-center">Nivel Upgrade</div>
                        <div className="flex-1 text-center">Taxa de Resgate</div>
                    </div>
                    <div className="flex items-center py-[.08rem]">
                        <div className="flex-1 text-center">Nivel Upgrade</div>
                        <div className="flex-1 text-center">Taxa de Resgate</div>
                    </div>
                    <div className="flex items-center py-[.08rem]">
                        <div className="flex-1 text-center">Nivel Upgrade</div>
                        <div className="flex-1 text-center">Taxa de Resgate</div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default Page;